<template lang="pug">
  .date-show-root
    .weekview
      .weekItem(
        v-for="(item,index)  in weekview" :key="index"
        :class="[item.style,{active:!isWeek}]"
        @mouseover ="moveHandler(item,$event,index)"
        @mousedown ="downHandler(item,$event,index)"
      )
        div
          span {{item.text}}
</template>
<script>
const range = n => [...Array(n).keys()]
const monthtexts = range(31).map(v => v + 1)
const weektexts = range(7).map(v => v + 1)
let weekview = []
export default {
  props: {
    isWeek: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      ismove: false,
      // flag:false,
      weekview,
      startIndex: ''
    }
  },
  mounted () {
    this.weekviews()
  },
  watch: {
    isWeek (val) {
      this.weekviews()
    }
  },
  methods: {
    weekviews () {
      this.weekview = []
      let times = !this.isWeek ? monthtexts : weektexts
      for (let i in times) {
        let text = times[i]
        this.weekview.push({
          text,
          style: ''
        })
      }
    },
    downHandler (item, e, index) {
      // e.preventDefault()
      if (this.ismove) {
        this.ismove = false
        if (this.startIndex === index) {
          item.style = 'in-range start-date end-date'
        }
        return false
      }
      this.ismove = true
      this.weekview.forEach((value) => {
        value.style = ''
      })
      item.style = 'in-range start-date end-date'
      this.startIndex = index
    },
    moveHandler (item, e, index) {
      // e.preventDefault()
      if (!this.ismove) return false
      for (let i = 0; i < this.weekview.length; i++) {
        if (i === this.startIndex || i === index) {
          continue
        }
        this.weekview[i].style = ''
      }
      let min = this.startIndex > index ? index : this.startIndex
      let max = this.startIndex > index ? this.startIndex : index
      this.weekview[min].style = 'in-range start-date'
      this.weekview[max].style = 'in-range end-date'
      for (let i = min + 1; i < max; i++) {
        this.weekview[i].style = 'in-range'
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.date-show-root
  user-select none
  font-size 12px
  border 1px solid #dcdfe6
  border-radius 4px
  box-sizing border-box
  .weekview
    margin 0 auto
    overflow hidden
    width 226px
    .weekItem
      float left
      width 32px
      height 30px
      box-sizing border-box
      position relative
      cursor pointer
      &.active
        margin 4px 0
      div
        height 30px
        padding 3px 0
        box-sizing border-box
        text-align center
        span
          width 24px
          height 24px
          display block
          margin 0 auto
          line-height 24px
          border-radius 50%
          position absolute
          left 50%
          transform translateX(-50%)
      &.start-date
        div
          margin-left 5px
          border-top-left-radius 15px
          border-bottom-left-radius 15px
        span
          background #1F60BD
          color #ffffff
      &.in-range
        div
          background-color #f2f6fc
      &.end-date
        div
          margin-right 5px
          border-top-right-radius 15px
          border-bottom-right-radius 15px
        span
          background #1F60BD
          color #ffffff
</style>
